<template>
    <div class="titlebox" @click="getts">
        <div>全部</div>
        <div v-for="item, i in list">
            {{ item.name }}
        </div>
        <div>签约摄影师1</div>
    </div>
    <div class="itemsbox">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { ref, reactive } from "vue";
const list = reactive([]);
const items = reactive([]);
const url = ref("https://www.skypixel.com/api/v2/works?lang=zh-Hans&platform=web&device=desktop&sort=hot&filter=featured:true&limit=20&offset=40");

// 获取高度进行图片填充
function getHeight() {
    document.querySelectorAll('.column');
    items.forEach((item, i) => {

    });
}
// 点击切换图片
function getts(e) {
    if (e.target.className != "titlebox") {
        console.log(e.target.innerText);
        if (e.target.innerText == "城市") {
            url.value = "https://www.skypixel.com/api/v2/topics/city/works?lang=zh-Hans&platform=web&device=desktop&sort=hot&filter=featured:true&limit=20&offset=20";
            getimg(url.value);
        } else if (e.target.innerText == "自然") {
            url.value = "https://www.skypixel.com/api/v2/topics/nature/works?lang=zh-Hans&platform=web&device=desktop&sort=hot&filter=featured:true&limit=20&offset=120";
            getimg(url.value);
        } else if (e.target.innerText == "运动") {
            url.value = "https://www.skypixel.com/api/v2/topics/sport/works?lang=zh-Hans&platform=web&device=desktop&sort=hot&filter=featured:true&limit=20&offset=40";
            getimg(url.value);
        } else if (e.target.innerText == "人物") {
            url.value = "https://www.skypixel.com/api/v2/topics/people/works?lang=zh-Hans&platform=web&device=desktop&sort=hot&filter=featured:true&limit=20&offset=40";
            getimg(url.value);
        } else if (e.target.innerText == "签约摄影师") {
            url.value = "https://www.skypixel.com/api/v2/photographers/contract-works?lang=zh-Hans&platform=web&device=desktop&sort=hot&slug=creator_works&filter=featured:true&limit=20&offset=60";
            getimg(url.value);
        }
    }
}
// 获取图片
getimg(url.value);
function getimg(url) {
    axios.get(`${url}`).then(r => {
        items.length = 0;
        items.push(...r.data.data.items);
        console.log(items);
        getHeight();
    });
}
// 获取标题;
gettitle();
function gettitle() {
    axios.get("https://www.skypixel.com/api/v2/topics?lang=zh-Hans&platform=web&device=desktop&limit=10").then(r => {
        list.length = 0;
        list.push(...r.data.data.items);
        console.log(list);
    });
}
</script>


<style scoped>
.titlebox {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.titlebox>div {
    cursor: pointer;
    padding: 10px;
}

.itemsbox {
    width: 1250px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.column {
    height: 100px;
}
</style>